<template>
	<Spin :spinning="loading && loadingArea === 'all'">
		<template #indicator v-if="!indicator">
			<span />
		</template>
		<div class="dmy-antd-view" v-bind="$attrs">
			<div class="dmy-antd-view-box clear">
				<div class="dmy-antd-view-left">
					<div class="dmy-antd-view-title-box">
						<div class="dmy-antd-view-title-nav" v-if="colour" />
						<div class="dmy-antd-view-title">
							<slot v-if="$slots.title" name="title" />
							<template v-else>{{ title }}</template>
						</div>
					</div>
					<Space :size="leftGap">
						<slot name="left" />
					</Space>
				</div>
				<div class="dmy-antd-view-right" :class="rightClass">
					<Space :block="false">
						<slot name="right" />
					</Space>
				</div>
			</div>
			<div v-if="line" class="dmy-antd-view-line" />
			<Spin :spinning="loading && loadingArea === 'content'">
				<template #indicator v-if="!indicator">
					<span />
				</template>
				<slot />
			</Spin>
		</div>
	</Spin>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { Space, Spin } from 'ant-design-vue'

defineOptions({ name: 'View' })

defineProps({
	colour: { type: Boolean, default: true },
	indicator: { type: Boolean, default: true },
	leftGap: { type: [String, Number] as PropType<'small' | 'middle' | 'large' | number> },
	line: { type: Boolean, default: false },
	loading: { type: Boolean },
	loadingArea: { type: String as PropType<'all' | 'content'>, default: 'all' },
	rightClass: { type: [String, Array] as PropType<string | string[]> },
	title: { type: String },
})
</script>
